<template>
  <div class="app-container" :style="setBgColor(albumpic_big)">
    <div id="blur">
      <div class="header">
        <x-tabs
          title="选择设备"
          :list="equipmentList"
          label="equipmentName"
          :shadow="false"
          :required="true"
          :isSheBei="false"
          ref="shebei"
          @tab-click="changeEquipmen"
        />
        <!-- 选择题库 -->
        <x-tabs
          title="选择题库"
          ref="tiku"
          :list="bankList"
          label="bankName"
          :shadow="false"
          :required="true"
          :isSheBei="false"
          @tab-click="changeBank"
        />
        <!-- 选择题型 -->
        <x-tabs
          title="选择题型"
          ref="tixing"
          :list="questionTypes"
          label="name"
          :required="true"
          :isSheBei="false"
          @tab-click="changeQuestionTypes"
        />
      </div>

      <!-- 显示题库习题 -->
      <data-list :list="dataList" @detail="doTest" />

      <!-- loading -->
      <div
        v-loading="showLoading"
        :style="showLoading ? 'height:200px' : 'height:0px'"
      />

      <!-- 空状态 -->
      <el-empty
        v-show="!showLoading && !dataList.length"
        description="暂无数据"
      />

      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="pageNum"
        @current-change="changePage"
      />

      <!-- 题目内容弹框 -->
      <el-dialog
        v-if="showTestInfo"
        width="70%"
        :visible.sync="showTestInfo"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <div slot="title">
          【{{ questionInfo.questionType | questionTypeFilter }}】
          <span style="color: #909399">
            ({{ questionInfo.questionType == 2 ? '多选题' : '单选题' }})</span
          >
        </div>
        <!-- 题目内容 -->
        <question
          :question-info="questionInfo"
          @answered="changeStatus"
          @doClose="closeDialog"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getEquipment } from '@/api/report'
import { findBank, findQuestion, findQuestionInfo } from '@/api/train'
import XTabs from '@/components/XTabs.vue'
import DataList from './DataList.vue'
import Question from './Question.vue'

const LETTER = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'] // 选项前缀
export default {
  name: 'Reports',
  components: {
    DataList,
    XTabs,
    Question
  },
  filters: {
    questionTypeFilter(id) {
      const questionType = {
        1: 'A1型题',
        2: 'X型题',
        3: 'A3/4型题',
        4: 'B型题',
        5: 'A2型题'
      }
      return questionType[id]
    }
  },
  data() {
    return {
      activeBank: '', // 选中的题库id
      activequestionType: '1', // 选中的题型
      bankList: [], // 题库选项
      questionTypes: [
        { id: 1, name: 'A1型题' },
        { id: 5, name: 'A2型题' },
        { id: 3, name: 'A3/4型题' },
        { id: 4, name: 'B型题' },
        { id: 2, name: 'X型题' }
      ],
      bankData: [], // 该题库中所有习题
      dataList: [], // 训练记录
      total: 0, // 总习题数量
      pageNum: 1,
      pageSize: 15,
      showLoading: false, // 加载动画

      questionInfo: null, // 试题信息
      showTestInfo: false, // 显示做题弹窗
      equipmentList: [], // 设备列表
      equipment: {}, //当前设备
      albumpic_big: '',
      topImg: {}
    }
  },
  created() {
    this.getEquipmentData() //获取设备
  },
  methods: {
    setBgColor(bgColor) {
      if (bgColor === '' || bgColor === '' || bgColor === undefined) {
        return { background: 'url(' + bgColor + ') center center no-repeat' }
      } else {
        return { background: 'url(' + bgColor + ') center center no-repeat' }
      }
    },
    // 获取题库
    getBanks() {
      findBank({ questionEquipmentId: this.equipment.item.id }).then((res) => {
        this.bankList = res.data
        if (res.data.length == 0) {
          return
        }
        // 获取当前题库训练题
        this.activeBank = res.data[0].id
        this.getQuestions()
      })
    },
    async getEquipmentData() {
      //获取设备数据
      let res = await getEquipment()
      console.log('获取设备数据', res)
      if (res.code == 200) {
        this.equipmentList = res.equipment.map((item) => {
          return { equipmentName: item.equipmentName, id: item.id }
        })
      }
    },
    // 获取训练题
    getQuestions() {
      // console.log('获取当前题库训练题')
      this.dataList.splice(0, this.dataList.length)
      this.showLoading = true
      findQuestion({
        questionEquipmentId: this.equipment.item.id,
        bankId: this.activeBank,
        questionType: this.activequestionType,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then((res) => {
        console.log(res)
        this.total = res.total
        this.dataList.push(...res.rows)
        this.showLoading = false
      })
    },

    // 切换题库
    changeBank(event) {
      // console.log(event)
      this.activeBank = event.item.id
      this.pageNum = 1
      this.$refs['tixing'].qingkong()
      this.$refs['tixing'].ling()
      this.getQuestions()
    },

    // 切换题目类型
    changeQuestionTypes(event) {
      // console.log(event)
      if (Object.keys(this.equipment).length == 0) {
        return
      }
      this.activequestionType = event.item.id
      this.pageNum = 1
      this.getQuestions()
    },

    // 切换页码
    changePage(pageNum) {
      // console.log(pageNum)
      this.pageNum = pageNum
      this.getQuestions()
    },

    // 显示训练题内容
    doTest(questionInfo) {
      console.log(questionInfo)
      findQuestionInfo({
        questionId: questionInfo.id,
        isB: questionInfo.quType !== 4 ? questionInfo.quType : null
      }).then((res) => {
        res.data.answer.map((item, index) => {
          item.answer = `${LETTER[index]}. ${item.answer}`
        })
        res.data.answerId = questionInfo.answerId
        res.data.status = questionInfo.status
        console.log('res.data', res.data)
        if (res.data.images) {
          res.data.images = res.data.images.map(
            (item) => process.env.VUE_APP_BASE_IMG_URL + item
          )
        }
        this.questionInfo = res.data
        this.showTestInfo = true
        console.log('this.questionInfo', this.questionInfo)
      })
    },
    changeStatus(param) {
      const index = this.dataList.findIndex(
        (item) => item.id === param.questionId
      )
      this.dataList[index].status = param.status
      this.dataList[index].answerId = param.answerId
    },
    closeDialog() {
      console.log(this.questionInfo)
      this.showTestInfo = false
    },

    changeEquipmen(e) {
      //选择设备标题
      this.equipment = e
      this.$refs['tiku'].qingkong()
      this.$refs['tixing'].qingkong()
      console.log('当前点击的设备', e)
      let str = e.item.equipmentName
      this.albumpic_big = this.topImg[str]
      this.getBanks()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  min-height: calc(100vh - 60px);
  box-sizing: border-box;
  width: 100%;
  background-size: 100% 100% !important;
  .header {
    border-radius: 15px;
    background: #e5f5ff;
    box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
    padding: 0 25px;
  }
  #blur {
    width: 100%;
    height: 100%;
    background: inherit;
  }

  .tabs-container {
    background-color: rgba(0, 0, 0, 0);
  }
}

.el-loading-mask {
  background-color: rgba(0, 0, 0, 0);
}
</style>
